<template>
  <div class="cart-container">
    <TopBar :goback='false' :clear='true' @removeAll = 'toggleConfirm({type:2})'>
        <slot>购物车</slot>
    </TopBar>

    <!-- 购物车列表 -->
    <div class="cart-list">
        <cart-card v-for="data in cartList" 
                    :key='data.id' :data='data' 
                    @showConfirm='toggleConfirm'
                    @updateCount='handleCount'
                    ></cart-card>
    </div>
    <div class="bottom-bar">
        <div class="tip">
            <p>订单满<span>299</span>元免费配送(不包含虚拟商品)</p>
        </div>
        <div class="settlement flex-r-b">
            <div class="left flex-r-b">
                <label class="check-label">
                    <input type="checkbox" name="toggleAll" id='' v-model="selectAll" @change="toggleSelectAll"/>
                    <i class="icon-checked"></i>
                </label>
                <div class="right flex-r-b">
                    <span>已选（1）</span>
                    <span class="total">￥{{totalPrice}}</span>
                </div>
            </div>
            <a class="settlement-btn" href="./confirm.html">
                去结算
            </a>
        </div>
    </div>
    <!-- 导航 -->
    <NavBar></NavBar>
    <!-- 确认框 -->
    <Confirm :text='tipText' :show='showConfirm' @confirm='handleDelete'></Confirm>
  </div>
</template>

<script>
import { mapActions , mapState } from 'vuex'
import NavBar from "@/components/Navbar";
import TopBar from "@/components/TopBar";
import CartCard from "@/components/CartCard";
import Confirm from "@/components/Confirm";
export default {
  components: {
    NavBar,
    TopBar,
    CartCard,
    Confirm
  },
  props: {},
  data() {
    return {
      selectAll:false,
      tipText:'确认删除该商品吗？',
      showConfirm:false,
      deleteId: null,
      type: 1
    };
  },
  created() {
      // 判断是否全选
      this._isSelectAll()
  },
  mounted() {},
  computed: {
      ...mapState(['cartList']),
      totalPrice(){
          let total = 0
          const {cartList}  = this
          cartList.forEach(item => {
              if(item.checked){
                  let price = parseFloat(item.price.slice(1))
                   total += price * 100 * item.count
              }
          });
          total = (total/100).toFixed(2)      
          return total
      },
  },
  methods: {
      ...mapActions(['updateCount','updateCartList']),
      // 判断是否购物车 全选状态
      _isSelectAll(){
          const data = this.cartList
          if(!data.length) return
          this.selectAll = data.every((item) => item.checked)
      },
      // 切换全选状态
      toggleSelectAll(){
          let data = this.cartList
          if(!data.length) return
          data.forEach( item => {
              item.checked = this.selectAll
          })
      },
      // 确认窗 弹出与关闭
      toggleConfirm({id,type}){
          if(!this.cartList.length) return
          this.type = type
          this.showConfirm = true
          if(type === 2){
            return  this.tipText = '确认删除全部商品吗？'
          }
            this.tipText = '确认删除该商品吗？'
          this.deleteId = id
      },
      // 删除
      handleDelete(confirm){
          if(confirm){
              let data = {
                  id:this.deleteId
              }
              this.updateCartList({data,type:this.type})
          }
          this.showConfirm = false
      },
      // 更新相应 列表项 count
      handleCount({id,count}){
          this.updateCount({id,count})
      }

  },
  watch: {
      cartList:{
          handler(){
              this._isSelectAll()
          },
          deep:true
      }
      
  }
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.cart-container {
  padding: 1rem 0.24rem;
  height: 100%;
  .cart-list {
    padding-bottom: 2.3rem;
  }

  .bottom-bar {
    position: fixed;
    bottom: 0.98rem;
    width: 100%;
    left: 0;
    height: 1.58rem;
    background: white;
    .tip {
      height: 0.6rem;
      background: $c-99;
      font-size: 0.26rem;
      font-weight: bold;
      color: white;
      line-height: 0.6rem;
      font-family: $f-Medium;
      span {
        color: $c-ffba17;
      }
    }
    .settlement {
      height: 0.98rem;
      line-height: 0.98rem;
      .left {
        flex: 1;
        .check-label {
          display: block;
          margin-left: 0.3rem;
          input[type="checkbox"] {
            position: absolute;
            left: -9999rem;
          }
          .icon-checked {
            display: block;
            width: 0.3rem;
            height: 0.3rem;
            border: 1px solid $c-99;
            border-radius: 0.15rem;
          }
          input[type="checkbox"]:checked + i {
            border: none;
            background: url("../../public/images/icon/icon_17.png") no-repeat;
            background-size: 100% 100%;
          }
        }
        .right {
          flex: 1;
          padding: 0 0.3rem;
          font-size: 0.24rem;
          color: $c-33;
          .total {
            font-size: 0.3rem;
            // font-family: $f-Medium;
          }
        }
      }
      .settlement-btn {
        width: 2.84rem;
        height: 100%;
        background: $c-ffba17;
        color: white;
        font-weight: bold;
        font-size: 0.3rem;
        text-align: center;
      }
    }
  }
}
</style>